<template lang="">
    <div>
        <div class="table-body-box">
            <div class="study-center-form">
                <el-form style="margin-left:60px;margin-top:25px;" :inline="true">
                    <el-form-item label="课程名称：">
                        <el-input
                        clearable
                        size="small"
                        placeholder="请输入内容"
                        v-model="title">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="讲师：">
                      <el-input
                        clearable
                        size="small"
                        placeholder="请输入内容"
                        v-model="username">
                      </el-input>
                        <!-- <el-date-picker
                        size="small"
                        v-model="username"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker> -->
                    </el-form-item>
                      <el-form-item style="margin-right:0;" label="课程类别">
                        <el-select size="small" v-model="courseType" placeholder="请选择活动区域">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="内部课程" value="0"></el-option>
                            <el-option label="外部课程" value="1"></el-option>
                            <el-option label="微课程" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="flex-row flex-btn-box">
                   <div style="width:50px;" class="btn-left">
                  </div>
                  <div class="btn-right">
                    <el-button type="primary" @click="addClass" size="small">新增</el-button>
                    <el-button type="primary" @click="deleteClass" :loading="searchLoading" size="small">删除</el-button>
                    <el-button type="primary" @click="searchList(1,10)" :loading="searchLoading" size="small">查询</el-button>
                  </div>
                </div>
            </div>
            <div class="study-center-table">
                <el-table 
                row-class-name="greyRow"
                height="70vh"
                :data="tableData" 
                style="width: 100%" 
                @selection-change="handleSelectionChange"
                :header-cell-style="{background:'#4787E3',color:'#ffffff'}">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column show-overflow-tooltip prop="title" label="课程名称" align="center">
                  </el-table-column>
                  <el-table-column show-overflow-tooltip prop="username" label="讲师" align="center">
                  </el-table-column>
                  <el-table-column show-overflow-tooltip prop="courseType" :formatter="initData" label="课程类别" align="center">
                  </el-table-column>
                  <el-table-column show-overflow-tooltip prop="introduce" label="课程描述" align="center">
                  </el-table-column>
                  <el-table-column
                  align="center"
                  fixed="right"
                  label="操作" 
                  width="150">
                  <template slot-scope="scope">
                      <el-button style="text-decoration:underline;" type="text" @click="applyClick(scope.row)" size="small">{{scope.row.courseType == 0 ? '查看' : '编辑'}}</el-button>
                      <el-button style="text-decoration:underline;" type="text" @click="delClick(scope.row.id)" size="small">删除</el-button>
                  </template>
                  </el-table-column>
                </el-table>
                <div class="study-center-pagination flex-row">
                  <pagination 
                  @pageTurnNum="pageNum" 
                  @pageTurnSize="pageSizeNum" 
                  :total="total"></pagination>
                </div>
            </div>
        </div>

        <el-dialog
          :close-on-click-modal='false'
          show-close
          title="新增课程"
          :visible.sync="checkChoose"
          width="500px"
          >
          <div style="margin:20px 0 0 20px;">
            <el-radio-group v-model="classRadio">
              <el-radio label="1">面授课程</el-radio>
              <el-radio label="2">微课程</el-radio>
            </el-radio-group>
          </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="checkChoose = false">取 消</el-button>
                <el-button size="small" type="primary"  @click="goDetailModal">确 认</el-button>
            </span>
        </el-dialog>
        <!-- 新增面授课程弹框 -->
        <el-dialog
        :close-on-click-modal='false'
        show-close
        :title="tipText"
        :visible.sync="checkApply"
        width="800px"
        :before-close="addOutCourseClose">
          <div class="class-detail-box">
              <div class="tips-box">
                  <div style="129px;" class="class-tips">{{smalltips}}</div>
              </div>
              <div class="face-class">
                  <el-form 
                  label-width='125px'
                  ref="addOutCourse" 
                  :model="qryCourseByIdObj" 
                  :rules="rules" 
                  :inline="true" 
                  style="text-align:center;">
                      <el-form-item style="margin-bottom:10px;" prop='title' label="课程名称：">
                          <el-input
                          clearable
                          size="small"
                          placeholder="请输入内容"
                          v-model="qryCourseByIdObj.title">
                          </el-input>
                      </el-form-item>
                      <el-form-item class="init-label is-required" label="讲师名称：">
                        <!-- <el-autocomplete
                          clearable
                          class="inline-input"
                          v-model="teaName"
                          size="small"
                          :fetch-suggestions="querySearch"
                          placeholder="请输入内容"
                          @select="handleSelect"
                        ></el-autocomplete> -->
                          <!-- reserve-keyword -->
                        <el-select
                          size="small"
                          v-model="teaName"
                          filterable
                          remote
                          placeholder="请输入关键词"
                          @change="teaSelectChange"
                          :remote-method="querySearch"
                          :loading="loading">
                          <el-option
                            v-for="item in teaSelectList"
                            :key="item.userId"
                            :label="item.teaName"
                            :value="item.userId">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item prop='courseType' label="课程级别：">
                        <el-input
                          clearable
                          size="small"
                          placeholder="面授课程"
                          disabled
                        >
                          </el-input>
                      </el-form-item>
                      <el-form-item style="margin-bottom:10px;" prop='courseTime' label="课程时长：">
                        <el-input
                          class="class-time-line"
                          type="number"
                          clearable
                          size="small"
                          placeholder="请输入内容"
                          v-model="qryCourseByIdObj.courseTime">
                          <div slot="append">min</div>
                          </el-input>
                      </el-form-item>
                      <el-form-item prop='date' label="日期：">
                          <el-date-picker
                            v-model="qryCourseByIdObj.date"
                            type="date"
                            size="small"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                          </el-date-picker>
                      </el-form-item>
                      <el-form-item style="margin-bottom:10px;" prop='time' label="时间：">
                        <el-time-select
                            v-model="qryCourseByIdObj.time"
                            size="small"
                            :picker-options="{
                              start: '00:00',
                              step: '00:15',
                              end: '23:59'
                            }"
                            placeholder="选择时间">
                          </el-time-select>
                      </el-form-item>
                      <el-form-item prop='address' label="地点：">
                        <el-input
                          clearable
                          size="small"
                          placeholder="请输入内容"
                          v-model="qryCourseByIdObj.address">
                          </el-input>
                      </el-form-item>
                      <el-form-item style="margin-bottom:10px;" prop='num' label="人数限制：">
                        <el-input
                          type="number"
                          clearable
                          size="small"
                          placeholder="请输入内容"
                          v-model="qryCourseByIdObj.num">
                          </el-input>
                      </el-form-item>
                      <div style="text-align:left;padding-left:44px;">
                        <el-form-item style="margin-bottom:10px;" label="是否精品课程：">
                            <el-switch
                            style="width:193px;" 
                            active-value="1"
                            inactive-value="0"
                            active-text="是"
                            inactive-text="否"
                            v-model="qryCourseByIdObj.isGood"></el-switch>
                        </el-form-item>
                      </div>
                      <div style="margin-top:20px;">
                          <el-form-item prop='smallTitle' label="课程说明：">
                              <el-input resize="none" style="width:550px;height:50px !important;" type="textarea" v-model="qryCourseByIdObj.smallTitle"></el-input>
                          </el-form-item>
                      </div>
                      <div style="margin-top:20px;">
                          <el-form-item prop='introduce' label="课程简介：">
                              <el-input resize="none" style="width:550px;height:50px !important;" type="textarea" v-model="qryCourseByIdObj.introduce"></el-input>
                          </el-form-item>
                      </div>
                      <div style="text-align:left;padding-left:44px;margin-top:20px;">
                        <el-form-item class="init-label is-required" label="宣传图片：">
                          <el-upload
                            ref="upload"
                            action="#"
                            :limit='1'
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
                            :on-exceed='limitNum'
                            :on-change="addAttachment"
                            :file-list="fileListMenu"
                            list-type="picture-card"
                            :auto-upload="false">
                              <i slot="default" class="el-icon-plus"></i>
                              <div slot="file" slot-scope="{file}">
                                <img
                                  class="el-upload-list__item-thumbnail"
                                  :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
                                  <span
                                    v-if="!removeList"
                                    class="el-upload-list__item-delete"
                                    @click="handleRemove(file)"
                                  >
                                    <i class="el-icon-delete"></i>
                                  </span>
                                </span>
                              </div>
                          </el-upload>
                        <!-- <el-dialog :visible.sync="dialogVisible">
                          <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog> -->
                        </el-form-item>
                      </div>
                  </el-form>
              </div>
          </div>
          <div style="text-align:center;padding:36px 0 26px 0;">
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDiloag('checkApply','addOutCourse')">取 消</el-button>
                <el-button size="small" :loading="agree" type="primary"  @click="apply()">确 认</el-button>
            </span>
          </div>
        </el-dialog>
        <!-- 内部课程详情弹框 -->
        <el-dialog
        :close-on-click-modal='false'
        show-close
        :title="tipText"
        :visible.sync="inside"
        width="800px"
        :before-close="insideDetail">
          <div class="class-detail-box">
              <div class="tips-box">
                  <div class="class-tips">{{smalltips}}</div>
              </div>
              <div class="face-class">
                  <el-form 
                  ref="insideDetail"
                  label-width='125px'
                  :model="qryCourseByIdObj" 
                  :rules="rules" 
                  :inline="true" 
                  style="text-align:center;">
                      <el-form-item style="margin-bottom:10px;" prop='title' label="课程名称：">
                          <el-input
                          disabled
                          clearable
                          size="small"
                          v-model="qryCourseByIdObj.title">
                          </el-input>
                      </el-form-item>
                      <el-form-item class="init-label is-required" label="讲师名称：">
                         <el-input
                          disabled
                          clearable
                          size="small"
                          v-model="teaName">
                          </el-input>
                      </el-form-item>
                      <el-form-item prop='courseType' label="课程级别：">
                        <el-input
                          disabled
                          clearable
                          size="small"
                          placeholder="面授课程"
                          disabled
                        >
                          </el-input>
                      </el-form-item>
                      <el-form-item style="margin-bottom:10px;" prop='courseTime' label="课程时长：">
                        <el-input
                          class="class-time-line"
                          disabled
                          type="number"
                          clearable
                          size="small"
                          v-model="qryCourseByIdObj.courseTime">
                          <div slot="append">min</div>
                          </el-input>
                      </el-form-item>
                      <el-form-item prop='date' label="日期：">
                          <el-date-picker
                            disabled
                            v-model="qryCourseByIdObj.date"
                            type="date"
                            size="small"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                          >
                          </el-date-picker>
                      </el-form-item>
                      <el-form-item style="margin-bottom:10px;" prop='time' label="时间：">
                        <el-time-select
                            disabled
                            v-model="qryCourseByIdObj.time"
                            size="small"
                            :picker-options="{
                              start: '08:00',
                              step: '00:15',
                              end: '23:59'
                            }"
                          >
                          </el-time-select>
                      </el-form-item>
                      <el-form-item prop='address' label="地点：">
                        <el-input
                          disabled
                          clearable
                          size="small"
                          v-model="qryCourseByIdObj.address">
                          </el-input>
                      </el-form-item>
                      <el-form-item style="margin-bottom:10px;" prop='num' label="人数限制：">
                        <el-input
                          disabled
                          type="number"
                          clearable
                          size="small"
                          v-model="qryCourseByIdObj.num">
                          </el-input>
                      </el-form-item>
                      <div style="text-align:left;padding-left:45px;">
                        <el-form-item style="margin-bottom:10px;" v-model="qryCourseByIdObj.isGood" label="是否精品课程：">
                            <el-switch
                            @change="switchTab"
                            style="width:193px;" 
                            active-value="1"
                            inactive-value="0"
                            active-text="是"
                            inactive-text="否"
                            v-model="qryCourseByIdObj.isGood"></el-switch>
                        </el-form-item>
                        <el-form-item v-show="couseType != 2" prop='introduce' label="下载评估：">
                          <a @click="uploadPg" style="color:#4787e4;cursor:pointer;">下载文件</a>
                        </el-form-item>
                      </div>
                      <div style="margin-top:20px;">
                          <el-form-item prop='smallTitle' label="课程说明：">
                              <el-input disabled resize="none" style="width:545px;height:50px !important;" type="textarea" v-model="qryCourseByIdObj.smallTitle"></el-input>
                          </el-form-item>
                      </div>
                      <div style="margin-top:20px;">
                          <el-form-item prop='introduce' label="课程简介：">
                              <el-input disabled resize="none" style="width:545px;height:50px !important;" type="textarea" v-model="qryCourseByIdObj.introduce"></el-input>
                          </el-form-item>
                      </div>
                      <div v-show="xcPhoto" style="text-align:left;padding-left:45px;margin-top:20px;">
                        <el-form-item class="init-label is-required" label="宣传图片：">
                         <div class="demo-image__preview">
                            <el-image 
                              style="width: 100px; height: 100px"
                              :src="preLoadPicture" 
                              :preview-src-list="preLoadList">
                            </el-image>
                          </div>
                        </el-form-item>
                      </div>
                  </el-form>
              </div>
          </div>
          <div style="text-align:center;padding:36px 0 26px 0;">
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDiloag('inside','insideDetail')">关 闭</el-button>
                <!-- <el-button size="small" :loading="agree" type="primary"  @click="apply()">确 认</el-button> -->
            </span>
          </div>
        </el-dialog>
        <!-- 下载课程评估 -->
        <el-dialog
        title="提示"
        :visible.sync="downLoadPg"
        width="300px"
        center>
        <span>确定下载课程评估吗？</span>
        <span slot="footer"  class="dialog-footer">
            <el-button size="mini" @click="downLoadPg = false">取 消</el-button>
            <el-button size="mini" @click="downLoadPg = false" type="primary"><a style="color: #ffffff !important;" :href="downLoadHref" download="" target="_blank" >确 定</a></el-button>
        </span>
        </el-dialog>
        <!-- 新增微课程弹框 -->
        <el-dialog
        :close-on-click-modal='false'
        show-close
        :title="tipText"
        :visible.sync="checkApplys"
        width="800px"
        :before-close="insertSmallCourse">
          <div v-loading="smallLoading" class="class-detail-box">
              <div class="tips-box">
                  <div class="class-tips">录入微课程信息</div>
              </div>
              <div class="small-class">
                  <el-form 
                  style="padding-left: 99px;"
                  label-width='120px'
                  ref="insertSmallCourse" 
                  :model="qryCourseByIdObjs" 
                  :rules="smallClassRules" 
                  >
                      <el-form-item style="margin-bottom:10px;" prop='name' label="课程名称：">
                        <el-input
                          clearable
                          size="small"
                          placeholder="请输入内容"
                          v-model="qryCourseByIdObjs.name">
                        </el-input>
                      </el-form-item>
                      <el-form-item style="margin-bottom:10px;" prop='smallType' label="课程类型：">
                         <el-select size="small" v-model="qryCourseByIdObjs.smallType" placeholder="请选择">
                          <el-option
                            v-for="item in smallTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item style="margin-bottom:10px;" label="课程类别：">
                        <el-input
                          size="small"
                          placeholder="微课程"
                          disabled>
                          </el-input>
                      </el-form-item>
                      <div style="margin-top:15px;">
                          <el-form-item prop='introduce' label="课程简介：">
                              <el-input resize="none" style="height:100px !important;width:500px;" type="textarea" v-model="qryCourseByIdObjs.introduce"></el-input>
                          </el-form-item>
                      </div>
                      <div style="text-align:left;margin-top:20px;">
                        <el-form-item class="init-label is-required" label="课程封面：">
                          <el-upload
                            ref="upload"
                            action="#"
                            :limit='1'
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP"
                            :on-exceed='limitNum'
                            :on-change="smallAddAttachment"
                            :file-list="smallCourseImg"
                            list-type="picture-card"
                            :auto-upload="false">
                              <i slot="default" class="el-icon-plus"></i>
                              <div slot="file" slot-scope="{file}">
                                <img
                                  class="el-upload-list__item-thumbnail"
                                  :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
                                  <span
                                    v-if="!removeList"
                                    class="el-upload-list__item-delete"
                                    @click="smallHandleRemove(file)"
                                  >
                                    <i class="el-icon-delete"></i>
                                  </span>
                                </span>
                              </div>
                          </el-upload>
                        <!-- <el-dialog :visible.sync="dialogVisible">
                          <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog> -->
                        </el-form-item>
                      </div>
                      <el-form-item style="margin-top:20px;" label="添加文件：">
                        <el-upload
                          style="width:300px;"
                          class="upload-demo"
                          ref="uploads"
                          action="#"
                          accept=".mp4,.wmv,.rmvb,.3gp,.mkv,.avi,.pdf"
                          :limit='1'
                          :on-exceed='limitNums'
                          :on-remove="limitRemoves"
                          :on-change="addAttachments"
                          :file-list="fileListMenus"
                          :auto-upload="false">
                          <!-- <i style="padding:0 20px;" slot="trigger" class="el-icon-plus"></i> -->
                          <el-button slot="trigger" size="small" type="default">选取文件</el-button>
                        </el-upload>
                        <P class="text">请上传pdf或视频格式</P>
                      </el-form-item>
                  </el-form>
              </div>
          </div>
          <div style="text-align:center;padding:36px 0 26px 0;">
            <span slot="footer" class="dialog-footer">
                <el-button size="small" :loading="disAgree" @click="closeDiloag('checkApplys','insertSmallCourse')">取 消</el-button>
                <el-button size="small" :loading="agree" type="primary"  @click="smallApply">确 认</el-button>
            </span>
          </div>
        </el-dialog>
    </div>
</template>
<script src="./studyjs/classRepair"></script>
<style lang="less" scoped>
@import url("~@/pagecss/studyCenter");
@import url("~@/pagecss/classApply");

.init-label.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.flex-btn-box {
  margin: 18px 0 10px 0;
  justify-content: space-between;
}
.el-dialog__header {
  border-bottom: 1px solid #eeeeee;
}
.class-tips {
  width: 130px;
  font-size: 16px;
}
.el-date-editor.el-input {
  width: 193px;
}

.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28/75rem;
  color: #8c939d;
  width: 51px;
  height: 51px;
  line-height: 51px;
  text-align: center;
}
.avatar {
  width: 51px;
  height: 51px;
  display: block;
}
</style>